<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <!-- <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('类型')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-type_id" class="form-control selectpicker" name="row[type_id]" data-rule="required" data-source="type/index">
                <option value="">{:__('Please select')}</option>
            </select>
        </div>
    </div>
   -->
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('名字')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('描述')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-sub_title" data-rule="required" class="form-control" name="row[sub_title]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('分类')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-type_id" data-rule="required"  data-source="type/index" class="form-control selectpage" name="row[type_id]"  data-primary-key="id" onchange="loadGuigeByTypeId(this.value)" type="text" value="">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('规格')}:</label>
        <div class="col-xs-12 col-sm-8">
            <!-- 动态生成复选框的容器 -->
            <div id="c-guige-checkboxes">
                <!-- 这里将通过 JS 动态插入复选框 -->
            </div>
            <!-- 隐藏字段，用于表单提交时传递选中的规格ID，多个用逗号分隔或 JSON -->
            <input type="hidden" id="c-guige_ids" name="row[guige_ids]" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('品牌')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-brand_id" data-rule="required"  data-source="brand/index" data-field="brand" class="form-control selectpage" name="row[brand_id]" type="text" value="">
        </div>
    </div>
    
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Images')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-images" data-rule="required" class="form-control" size="50" name="row[images]" type="text" value="">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-images" class="btn btn-danger faupload" data-input-id="c-images" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="true" data-preview-id="p-images"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-images" class="btn btn-primary fachoose" data-input-id="c-images" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-images"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-images"></ul>
        </div>
    </div>
 
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">是否推荐:</label>
        <div class="col-xs-12 col-sm-8">
            <input  id="c-commend" name="row[commend]" type="hidden" value="1">
            <a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-commend" data-yes="1" data-no="0" >
            <i class="fa fa-toggle-on text-success fa-2x"></i>
            </a>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('上架')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input  id="c-status" name="row[status]" type="hidden" value="1">
            <a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-status" data-yes="1" data-no="0" >
            <i class="fa fa-toggle-on text-success fa-2x"></i>
            </a>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Num')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-num" data-rule="required" class="form-control" name="row[num]" type="number" value="100">
        </div>
    </div>
    <div class="form-group" style="display: none;">
        <label class="control-label col-xs-12 col-sm-2">{:__('Create_time')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-create_time" data-rule="required" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[create_time]" type="text" value="{:date('Y-m-d H:i:s')}">
        </div>
    </div>
  
   
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('详情')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-detail" data-rule="required" class="form-control editor" name="row[detail]" type="text" value=""></textarea>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>
</form>
<script>
  /**
 * 根据选中的分类 type_id，加载对应的规格，并以复选框形式渲染
 */
function loadGuigeByTypeId(typeId) {
    var $container = $('#c-guige-checkboxes');
    var $hiddenInput = $('#c-guige_ids');

    // 清空现有复选框
    $container.empty();
    $hiddenInput.val(''); // 清空隐藏域
  
    if (!typeId) {
        return;
    }

    // 发起 AJAX 请求，获取该分类下的规格列表
    $.ajax({
        url: 'type/children', // 后端接口，需返回该分类下的规格数据
        type: 'GET',
        data: {
            name: typeId
        },
        dataType: 'json',
        success: function (res) {
            if (res.code === 1 && res.data && res.data.length > 0) {
                var html = [];
                $.each(res.data, function (index, guige) {
                    console.log(guige);
                    console.log(guige.id);
                    console.log(guige.name);
                    // 假设返回的数据格式是 [{id: 1, name: '规格1'}, {id: 2, name: '规格2'}]
                    html.push(
                       
                        '<label class="checkbox-inline">' +
                        '<input type="checkbox" name="guige_checkbox_' + guige.id + '" value="' + guige.id + '">' +
                        guige.name +
                        '</label>' 
                      
                    );
                });
                $container.html(html.join(''));

                // 可选：绑定复选框变化事件，同步更新隐藏域的值（所有选中ID，逗号分隔）
                $('input[name^="guige_checkbox_"]').on('change', function () {
                    var selectedIds = [];
                    $('input[name^="guige_checkbox_"]:checked').each(function () {
                        
                        selectedIds.push($(this).val());
                    });
                    $hiddenInput.val(selectedIds.join(','));
                });

            } else {
                $container.html('<div class="alert alert-info">该分类暂无规格</div>');
                $hiddenInput.val('');
            }
        },
        error: function () {
            $container.html('<div class="alert alert-danger">加载规格失败</div>');
            $hiddenInput.val('');
        }
    });
}
</script>